<template>
<view class="container">
    <view class="tab" :style="'background:' + platformSetting.defaultColor">
      <view v-for="(item, tab_index) in List.tab" :key="tab_index" :class="(showTabIndex == tab_index ? 'active':'noneUse')" :data-id="tab_index" @tap="bindTab">{{item.title}}</view>
    </view>
    <view class="Tab_page" :style="'background:' + platformSetting.defaultColor">
        <block v-for="(list, list_m) in List.listData" :key="list_m">
          <scroll-view :hidden="!(showTabIndex == list_m)" v-if="sysHeight" :style="{height:sysHeight + 'px'}" class="tab_page_list" scroll-y upper-threshold="-30" lower-threshold="10" @scrolltoupper="scrollTopToReflesh" @scrolltolower="scrollBottomToLoadMore">
            <view class="tab_page_list_container" v-if="list&&list.length!=0">
              <view class="cardVoucherListItem" v-for="(cardVoucherItem, index) in list" :key="index" @tap="tolinkUrl" :data-link="'my_card_voucher_detail.html?id=' + cardVoucherItem.id">
                <view class="my_cardVoucher_title">
                  <text class="my_cardVoucher_name" :style="'color:' + platformSetting.defaultColor">{{cardVoucherItem.cardName}}</text>
                  <view class="my_cardVoucher_value"><text v-if="cardVoucherItem.cardVoucherType==1">卡包</text><text v-else>票券</text></view>
                </view>
                <view class="my_cardVoucher_info">
                  <view class="my_cardVoucher_icon">
                    <image class="my_cardVoucher_icon_img" :src="cardVoucherItem.cardImage||platformSetting.logo"></image>
                    <text class="my_cardVoucher_time" v-if="cardVoucherItem.validateType==1">永久有效</text>
                    <text class="my_cardVoucher_time" v-else>{{cardVoucherItem.validateDatetimeEnd}}后到期</text>
                  </view>
                  <view class="my_cardVoucher_count">
                    <text class="my_cardVoucher_count_text">剩余次数</text>
                    <text class="my_cardVoucher_count_value" :style="'color:' + platformSetting.defaultColor" v-if="cardVoucherItem.countPerInstance==-1">无限次</text>
                    <text class="my_cardVoucher_count_value" :style="'color:' + platformSetting.defaultColor" v-else>{{cardVoucherItem.countPerInstance-cardVoucherItem.usedCount}}</text>
                  </view>
                  <view class="voucherStyle">
                    <view class="round" :style="'background:' + platformSetting.defaultColor"></view>
                    <view class="round" :style="'background:' + platformSetting.defaultColor"></view>
                  </view>
                  <view class="item_bg" :style="'background-image:' + (cardVoucherItem.cardImage?'url('+cardVoucherItem.cardImage+')':'url('+platformSetting.logo+')')"></view>
                </view>
              </view>
            </view>
            <view class="noList" v-else>
              <text v-if="showTabIndex==0">主人~现在暂时还没有可使用的卡券哦~!</text>
              <text v-if="showTabIndex==1">主人~现在暂时还没有已使用的卡券哦~!</text>
              <text v-if="showTabIndex==2">主人~现在暂时还没有已过期的卡券哦~!</text>
            </view>
          </scroll-view>
        </block>
    </view>
</view>
</template>

<script>

export default {
  data() {
    return {
      List: {
        tab: [],
        listData: []
      },
      showTabIndex: 0,
      sysWidth: 320,
      //图片大小
      sysHeight: '',
      optParam: {},
      platformSetting: "",
      loginUser: ""
    };
  },

  components: {},
  props: {},
  // option数据 用来转发和刷新
  onLoad: function (options) {
    this.optParam = options; // this.getData(0)
    this.loadList();
  },
  onReady: function () {
    this.setData({
      platformSetting: getApp().globalData.setting.platformSetting,
      loginUser: getApp().globalData.loginUser,
      sysWidth: getApp().globalData.sysWidth,
      sysHeight: getApp().globalData.sysHeight-40
    });
    console.log(getApp().globalData.setting,getApp().globalData.sysHeight);

    if (getApp().globalData.setting) {
      wx.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: getApp().globalData.setting.platformSetting.defaultColor
      });
    }
  },
  onShow: function () {
      let that=this;
      if(!getApp().globalData.loginUser){
          wx.showModal({
            title: '提示',
            content: '您还未登录,请先登入',
            success: function (res) {
              if (res.confirm) {
                let url="my_card_voucher.html"
                let backUrl=encodeURIComponent(url)
                getApp().globalData.checkIfLogin(backUrl);
              } else if (res.cancel) {}
            }
          });
      }
  },
  onHide: function () {},
  onUnload: function () {},
  onPullDownRefresh: function () {
    this.List = {
      tab: [],
      listData: []
    };
    this.loadList();
    wx.stopPullDownRefresh();
  },
  methods: {
    tolinkUrl: function (e) {
      console.log("tolinkUrl", e);
      let linkUrl = e.currentTarget.dataset.link;
      getApp().globalData.linkEvent(linkUrl);
    },

    /* 回首页 */
    toIndex: function () {
      getApp().globalData.toIndex();
    },
    /* 去掉日期的时间 */
    spliceData: function (e) {
      for (let i = 0; i < e.length; i++) {
        e[i].validateDatetimeStart = e[i].validateDatetimeStart.substring(0, 10);
        e[i].validateDatetimeEnd = e[i].validateDatetimeEnd.substring(0, 10);
      }

      return e;
    },
    // 点击Tab切换
    bindTab: function (e) {
      var index = e.currentTarget.dataset.id;
      console.log("index",index)
      this.setData({
        showTabIndex: index
      });
    },
    loadTab: function () {
      //加载tab项
      let tab = [{
        title: '未使用',
        linkUrl: '',
        page: 1,
        pageSize: 0,
        curPage: 0,
        totalSize: 0
      }, {
        title: '已使用',
        linkUrl: '',
        page: 1,
        pageSize: 0,
        curPage: 0,
        totalSize: 0
      }, {
        title: '已过期',
        linkUrl: '',
        page: 1,
        pageSize: 0,
        curPage: 0,
        totalSize: 0
      }];
      let List = this.List;
      List.tab = tab;

      for (let i = 0; i < tab.length; i++) {
        List.listData.push([]);
      }

      this.setData({
        List: List
      });
      let listData = this.loadListData(); //加载tab项对应列表数据
    },
    loadListData: function () {
      //加载tab项对应列表数据
      this.getData(1);
      this.getData(2);
      this.getData(3);
      let listData = [];
      return listData;
    },
    // 加载全部数据并且暴露渲染
    loadList: function (e) {
      let tab = this.loadTab(); //加载tab项
    },
    getData: function (tabi) {
      let that = this;
      let getParam = {};
      getParam.cardVoucherInstanceStatus = tabi;
      getParam.page = that.List.tab[tabi - 1].page;
      let customIndex = getApp().globalData.AddClientUrl("/wx_find_user_card_voucher_instances.html", getParam, 'get');
      wx.request({
        url: customIndex.url,
        header: getApp().globalData.header,
        success: function (res) {
          console.log(res.data);
          wx.hideLoading();
          let List = that.List; //tab数据变化

          List.tab[tabi - 1].pageSize = res.data.pageSize;
          List.tab[tabi - 1].curPage = res.data.curPage;
          List.tab[tabi - 1].totalSize = res.data.totalSize;
          let result = that.spliceData(res.data.relateObj.result);
          List.listData[tabi - 1] = List.listData[tabi - 1].concat(result);
          that.setData({
            List: List
          });
        },
        fail: function (res) {
          wx.hideLoading();
          getApp().globalData.loadFail();
        }
      });
    },
    scrollTopToReflesh: function () {},
    scrollBottomToLoadMore: function () {
      console.log(this.List);
      let List = this.List;
      let tabIndex = this.showTabIndex;
      console.log(List.tab[tabIndex].page);

      if (List.tab[tabIndex].totalSize > List.tab[tabIndex].curPage * List.tab[tabIndex].pageSize) {
        ++List.tab[tabIndex].page;
        this.getData(tabIndex);
      }
    },
    setData: function (obj) {
      let that = this;
      let keys = [];
      let val, data;
      Object.keys(obj).forEach(function (key) {
        keys = key.split('.');
        val = obj[key];
        data = that.$data;
        keys.forEach(function (key2, index) {
          if (index + 1 == keys.length) {
            that.$set(data, key2, val);
          } else {
            if (!data[key2]) {
              that.$set(data, key2, {});
            }
          }

          data = data[key2];
        });
      });
    }
  }
};
</script>
<style>
@import "./index.css";
</style>